<template>
    <div class="course-center">
        <Header></Header>
        <div class="container">
            <div class="course-top">
                <div class="userinfo">
                    <div class="touxiang">
                        <img v-if="userInfo.avatar" :src="`${userInfo.avatar}`" alt="">
                        <img v-else src="../../assets/images/yhtx.png" alt="">
                    </div>
                    <div class="jianjie">
                        <div class="jjtop">
                            <h3>{{ userInfo.student_name || userInfo.real_name || userInfo.nickname}}</h3>
                            <p>{{ userInfo.id_type === 0 ? '游客' : '学员'}}</p>
                        </div>
                        <div class="jjbottom">
                            <span>ID：{{ userInfo.id }}</span>
                            <span>学号：{{ userInfo.student_no }}</span>
                            <span>学校名称：{{ userInfo.school_name }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="course-box">
                <SidebarMenu :tabList="tabList" @tabClick="handleTabsClick"></SidebarMenu>
                <CourseList v-if="activeName === 'course'" @toDetail="toDetail"></CourseList>
                <CourseTeach v-if="activeName === 'teach'" @correctHomework="correctHomework"></CourseTeach>
                <CorrectHomework v-if="activeName === 'homework'"></CorrectHomework>
                <StudyReport v-if="activeName === 'report'"></StudyReport>
                <DownloadTools v-if="activeName === 'tools'"></DownloadTools>
                <UserInfo v-if="activeName === 'user'" :userInfo="userInfo" @getUserInfo="getUserInfo"></UserInfo>
            </div>
        </div>
        <ClassReminder></ClassReminder>
        <Footer></Footer>
    </div>
</template>
<script>
    import Header from "../../components/Header.vue";
    import Footer from "../../components/Footer.vue";
    import ClassReminder from "../../components/ClassReminder.vue";
    import SidebarMenu from "../../components/SidebarMenu.vue";
    import CourseList from './components/courseList.vue';
    import CourseTeach from './components/courseTeach';
    import CorrectHomework from './components/correctHomework';
    import StudyReport from './components/studyReport';
    import DownloadTools from './components/downloadTools';
    import UserInfo from '../teacher/components/userInfo';
    export default {
        name: "CourseCenter",
        components: {
            Header,
            Footer,
            ClassReminder,
            SidebarMenu,
            CourseList,
            CourseTeach,
            CorrectHomework,
            StudyReport,
            DownloadTools,
            UserInfo
        },
        computed: {
            imageUrl() {
                return process.env.VUE_APP_IMAGE_URL; // 自动匹配当前环境
            }
        },
        data() {
            return {
                tabList: [
                    {
                        name: "平台课程管理",
                        children: [
                            {
                                title: '课程中心',
                                type: 'course'
                            },
                            {
                                title: '课程教学',
                                type: 'teach'
                            },
                            {
                                title: '批改作业',
                                type: 'homework'
                            },
                            {
                                title: '学情报告',
                                type: 'report'
                            },
                            {
                                title: '创作工具',
                                type: 'tools'
                            }
                        ]
                    },
                    {
                        name: "个人管理",
                        children: [
                            {
                                title: '基本信息',
                                type: 'user'
                            }
                        ]
                    }
                ],
                activeName: 'course',
                userInfo: {}
            }
        },
        mounted() {
            const userinfo = JSON.parse(localStorage.getItem('userinfo')) || {};
            const token = userinfo.token;
            console.log(token, 'userinfo===');
            if (token) {
                this.getUserInfo();
            }
        },
        methods: {
            async getUserInfo() {
                const res = await this.$request.get('api/user/user_info');
                console.log(res, 'res===');
                if (res.code == 1) {
                    this.userInfo = res.data.userinfo || {};
                }
            },
            toDetail(id) {
                // console.log(id, 'id===');
                this.$router.push('/kcDetail?id=' + id);
            },
            handleTabsClick(item) {
                this.activeName = item.type;
                // console.log(item, 'eeeeee');
            },
            correctHomework() {
                console.log('eeeeeee');
                this.activeName = 'homework';
            }
        }
    }
</script>
<style lang="less" scoped>
.course-center{
    .container{
        background: #FFFFFF;
        .course-top{
            width: 100%;
            height: 240px;
            background: url("../../assets/images/coursebg.png") no-repeat center;
            background-size: 100% 100%;
            margin-top: 68px;
            .userinfo{
                display: flex;
                align-items: center;
                max-width: 1200px;
                margin: 0 auto;
                padding-top: 80px;
                .touxiang{
                    width: 80px;
                    height: 80px;
                    overflow: hidden;
                    margin-right: 20px;
                    img{
                        width: 100%;
                        height: 100%;
                        border-radius: 8px;
                    }
                }
                .jianjie{
                    .jjtop{
                        display: flex;
                        align-items: center;
                        h3{
                            font-weight: 600;
                            font-size: 42px;
                            color: #317AF7;
                            margin-right: 20px;
                            margin-bottom: 0px;
                        }
                        p{
                            width: 52px;
                            height: 18px;
                            line-height: 18px;
                            background: #1664FF;
                            border-radius: 10px 10px 10px 0px;
                            font-weight: 500;
                            font-size: 10px;
                            color: #FFFFFF;
                        }
                    }
                    .jjbottom{
                        display: flex;
                        align-items: center;
                        span{
                            font-weight: 500;
                            font-size: 16px;
                            color: #333333;
                            margin-right: 40px;
                        }
                    }
                }
            }
        }
        .course-box{
            width: calc(100% - 120px);
            margin: 30px auto;
            display: flex;
            align-items: flex-start;
            // justify-content: space-between;
        }
    }
}
</style>